<template>
  <view>
    <canvas canvas-id="progressCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
		<view class="progress-text">
			<view>{{ progress }}%</view>
			<view class="bottom_text">进度</view>
		</view>
  </view>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      progress: 0,
      canvasWidth: 44,
      canvasHeight: 44,
    };
  },
  watch: {
    percent(newVal) {
      this.drawProgress(newVal);
    }
  },
  mounted() {
		setTimeout(()=>{
			if(this.$music.bgmInstance){
				this.$music.bgmInstance.destroy();
				this.$music.bgmInstance = null;
			}
		}, 0)
    this.drawProgress(this.percent);
  },
  methods: {
    drawProgress(percent) {
      const ctx = uni.createCanvasContext('progressCanvas', this);

      // 清空画布
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

      const radius = 18; // 圆环半径
      const centerX = this.canvasWidth / 2; // 圆心横坐标
      const centerY = this.canvasHeight / 2; // 圆心纵坐标

      // 绘制底部圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setLineWidth(3);
      ctx.setStrokeStyle('#343639');
      ctx.stroke();

      // 绘制进度圆环
      ctx.beginPath();
      ctx.arc(
        centerX,
        centerY,
        radius,
        -0.5 * Math.PI,
        (2 * percent * Math.PI) / 100 - 0.5 * Math.PI
      );
      ctx.setLineWidth(3);
      ctx.setStrokeStyle('#FFFFFF');
      ctx.stroke();

      ctx.draw();

      // 更新进度值
      this.progress = percent;

    },
  },
};
</script>

<style scoped>
	.progress-text {
		position: absolute;
    right: 12px;
    bottom: 11px;
		font-size: 10px;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bottom_text{
		margin-top: -2rpx;
	}
</style>
